<template>
	<view class="page">
		<view>{{ result }}</view>
		<view class="test-item" v-for="(item, index) in list" :key="index" @tap="onTapItem(item)">
			{{ item.name }}<text v-if="item.method">{{ item.method }}</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted, onUnmounted } from 'vue';
	const list = ref<Array<Model>>([]);
	const result = ref<any>('')
	onMounted(() => {
		getList();
		uni.$on('onSelectAddress', (data) => {
			console.log('---data', JSON.stringify(data))
		})
	})
	onUnmounted(() => {
		uni.$off('onSelectAddress')
	})
	interface Model {
		name : string,
		path ?: string,
		method ?: string,
	}
	const getList = () => {
		list.value.push({ name: "form表单", path: "/test/pages/form/form" });
		list.value.push({ name: "登录", path: "/mine/pages/login/login" });
		list.value.push({ name: "选择地址", path: "/mine/pages/address/list/address-list?type=select" });
		list.value.push({ name: "z-paging", path: "/test/pages/z-paging/z-paging-list1" });
		list.value.push({ name: "test-view", path: "/test/pages/test-view/test-view" });
		list.value.push({ name: "page-list-table", path: "/test/pages/z-paging/page-list-table" });
	}
	const onTapItem = (item : Model) => {
		if (item.path) {
			uni.navigateTo({
				url: item.path 
			})
			return
		}
	}
</script>

<style lang="scss" scoped>
	.test {
		word-wrap: break-word;
		white-space: normal;
		font-size: 14px;
		background-color: white;
		border: 1px solid var(--page-color);

		&-item {
			margin: 0px 16px;
			width: calc(100vw - 32px);
			height: 40px;
			box-sizing: border-box;
			text-align: center;
			line-height: 2.5;
			background-color: white;
			border-bottom: 1px solid var(--page-color);
			font-size: 16px;

			&:active {
				background-color: var(--primary-color);
				color: #ffffff;
			}

			&:nth-child(1) {
				border-radius: 8px 8px 0 0;
				font-weight: 400;
			}

			&:nth-child(2) {
				font-weight: 500;
			}

			&:nth-child(3) {
				font-weight: 600;
			}

			&:nth-last-child(1) {
				border-radius: 0 0 8px 8px;
			}
		}
	}
</style>